<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="basepath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
<title>zmall网上商城</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css"
	href="UserStyle/styles/bootstrap4/bootstrap.min.css">
<link
	href="UserStyle/plugins/font-awesome-4.7.0/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css"
	href="UserStyle/plugins/OwlCarousel2-2.2.1/owl.carousel.css">
<link rel="stylesheet" type="text/css"
	href="UserStyle/plugins/OwlCarousel2-2.2.1/owl.theme.default.css">
<link rel="stylesheet" type="text/css"
	href="UserStyle/plugins/OwlCarousel2-2.2.1/animate.css">
<link rel="stylesheet" type="text/css"
	href="UserStyle/styles/product.css">
<link rel="stylesheet" type="text/css"
	href="UserStyle/styles/product_responsive.css">
</head>
<body>
	<div class="super_container">

		<!-- Header -->

		<header class="header">
			<div class="header_container">
				<div class="container">
					<div class="row">
						<div class="col">
							<div
								class="header_content d-flex flex-row align-items-center justify-content-start">
								<div class="logo">
									<a href="#">zmall网上商城</a>
								</div>
								<nav class="main_nav">
									<ul>
										<li><a href="${basepath}/api/front/listGoods">商城首页</a></li>
										<li><a href="categories.html">商品分类</a></li>
										<li><a href="#">商家入驻</a></li>
										<li><a href="contact.html">个人中心</a></li>
									</ul>
								</nav>
								<div class="header_extra ml-auto">
									<div class="shopping_cart">
										<a href="Cart.jsp"> <svg version="1.1"
												xmlns="http://www.w3.org/2000/svg"
												xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
												viewBox="0 0 489 489"
												style="enable-background: new 0 0 489 489;"
												xml:space="preserve">
											<g>
												<path
													d="M440.1,422.7l-28-315.3c-0.6-7-6.5-12.3-13.4-12.3h-57.6C340.3,42.5,297.3,0,244.5,0s-95.8,42.5-96.6,95.1H90.3
													c-7,0-12.8,5.3-13.4,12.3l-28,315.3c0,0.4-0.1,0.8-0.1,1.2c0,35.9,32.9,65.1,73.4,65.1h244.6c40.5,0,73.4-29.2,73.4-65.1
													C440.2,423.5,440.2,423.1,440.1,422.7z M244.5,27c37.9,0,68.8,30.4,69.6,68.1H174.9C175.7,57.4,206.6,27,244.5,27z M366.8,462
													H122.2c-25.4,0-46-16.8-46.4-37.5l26.8-302.3h45.2v41c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5v-41h139.3v41
													c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5v-41h45.2l26.9,302.3C412.8,445.2,392.1,462,366.8,462z" />
											</g>
										</svg>
											<div>购物车</div>
										</a>
									</div>
									<div class="search">
										<div class="search_icon">
											<svg version="1.1" id="Capa_1"
												xmlns="http://www.w3.org/2000/svg"
												xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
												viewBox="0 0 475.084 475.084"
												style="enable-background: new 0 0 475.084 475.084;"
												xml:space="preserve">
										<g>
											<path
													d="M464.524,412.846l-97.929-97.925c23.6-34.068,35.406-72.047,35.406-113.917c0-27.218-5.284-53.249-15.852-78.087
												c-10.561-24.842-24.838-46.254-42.825-64.241c-17.987-17.987-39.396-32.264-64.233-42.826
												C254.246,5.285,228.217,0.003,200.999,0.003c-27.216,0-53.247,5.282-78.085,15.847C98.072,26.412,76.66,40.689,58.673,58.676
												c-17.989,17.987-32.264,39.403-42.827,64.241C5.282,147.758,0,173.786,0,201.004c0,27.216,5.282,53.238,15.846,78.083
												c10.562,24.838,24.838,46.247,42.827,64.234c17.987,17.993,39.403,32.264,64.241,42.832c24.841,10.563,50.869,15.844,78.085,15.844
												c41.879,0,79.852-11.807,113.922-35.405l97.929,97.641c6.852,7.231,15.406,10.849,25.693,10.849
												c9.897,0,18.467-3.617,25.694-10.849c7.23-7.23,10.848-15.796,10.848-25.693C475.088,428.458,471.567,419.889,464.524,412.846z
												 M291.363,291.358c-25.029,25.033-55.148,37.549-90.364,37.549c-35.21,0-65.329-12.519-90.36-37.549
												c-25.031-25.029-37.546-55.144-37.546-90.36c0-35.21,12.518-65.334,37.546-90.36c25.026-25.032,55.15-37.546,90.36-37.546
												c35.212,0,65.331,12.519,90.364,37.546c25.033,25.026,37.548,55.15,37.548,90.36C328.911,236.214,316.392,266.329,291.363,291.358z
												" />
										</g>
									</svg>
										</div>
									</div>
									<div class="hamburger">
										<i class="fa fa-bars" aria-hidden="true"></i>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Search Panel -->
			<div class="search_panel trans_300">
				<div class="container">
					<div class="row">
						<div class="col">
							<div
								class="search_panel_content d-flex flex-row align-items-center justify-content-end">
								<form action="#">
									<input type="text" class="search_input" placeholder="Search"
										required="required">
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- Social -->
			<div class="header_social">
				<ul>
					<li><a href="#"><i class="fa fa-pinterest"
							aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-instagram"
							aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-facebook"
							aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-twitter"
							aria-hidden="true"></i></a></li>
				</ul>
			</div>
		</header>

		<!-- Menu -->

		<div class="menu menu_mm trans_300">
			<div class="menu_container menu_mm">
				<div class="page_menu_content">

					<div class="page_menu_search menu_mm">
						<form action="#">
							<input type="search" required="required"
								class="page_menu_search_input menu_mm"
								placeholder="Search for products...">
						</form>
					</div>
					<ul class="page_menu_nav menu_mm">
						<li class="page_menu_item menu_mm"><a href="index.html">商城首页</a></li>
						<li class="page_menu_item  menu_mm"><a href="categories.html">更多商品<i
								class="fa fa-angle-down"></i></a></li>
						<li class="page_menu_item menu_mm"><a href="index.html">商家入驻<i
								class="fa fa-angle-down"></i></a></li>
						<li class="page_menu_item menu_mm"><a href="contact.html">个人中心<i
								class="fa fa-angle-down"></i></a></li>
					</ul>
				</div>
			</div>

			<div class="menu_close">
				<i class="fa fa-times" aria-hidden="true"></i>
			</div>

			<div class="menu_social">
				<ul>
					<li><a href="#"><i class="fa fa-pinterest"
							aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-instagram"
							aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-facebook"
							aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-twitter"
							aria-hidden="true"></i></a></li>
				</ul>
			</div>
		</div>

		<!-- Home -->
		<!-- Product Details -->
		<form action="GoodsDetailsServlet">
			<div class="product_details"
				style="padding-top: 100px; padding-bottom: 100px;">
				<div class="container">
					<div class="row details_row">

						<!-- Product Image -->
						<div class="col-lg-6">
							<div class="details_image">

								<div class="details_image_large">
									<img id="cover" src="" alt="">
									<div class="product_extra product_new">
										<a href="categories.html">New</a>
									</div>
								</div>
								<input type="text" value="${param.img}" name="img_name"
									style="display: none;">
							</div>
						</div>

						<!-- Product Content -->
						<div class="col-lg-6">
							<div class="details_content">
								<div class="details_name" id="goodsname"></div>
								<input type="text" value="" name="goods_name"
									style="display: none;">
								<div class="details_price">价格：</div>
								<div class="details_price" id="goodsprice"></div>
								<input type="text" value="${param.price}" name="goods_price"
									style="display: none;">
								<!-- In Stock -->
								<div class="in_stock_container">
									<div class="availability">商品库存:</div>
									<span id="goodscount"></span>
								</div>
								<div class="in_stock_container">
									<div class="availability">宝贝店铺:</div>
									<span id="shopname"><a href=""></a></span> <input type="text"
										value="${param.sname}" name="goods_Shopname"
										style="display: none;">
										<input type="hidden"  id="shopid" value="">
								</div>
								<div class="details_text">
									<div class="availability">商品简介:</div>
									<p id="goodsinfo"></p>
								</div>

								<!-- Product Quantity -->
								<div class="product_quantity_container">
									<div class="product_quantity clearfix">
										<span>数量</span> <input id="quantity_input" type="text"
											pattern="[1-9]*" value="1" name="goods_num">
										<div class="quantity_buttons">
											<div id="quantity_inc_button"
												class="quantity_inc quantity_control">
												<i class="fa fa-chevron-up" aria-hidden="true"></i>
											</div>
											<div id="quantity_dec_button"
												class="quantity_dec quantity_control">
												<i class="fa fa-chevron-down" aria-hidden="true"></i>
											</div>
										</div>
									</div>
									<input type="text" value="addShopCar" name="op"
										style="display: none;">
									<div class="cart_button">
										<input id="btnSubmit" class="button" type="button"
											value="添加到购物车"> <input class="button" id="btnlogin"
											type="button" value="模拟登录">
									</div>
								</div>

								<!-- 分享 -->
								<div class="details_share">
									<span>分享:</span>
									<ul>
										<li><a href="#"><i class="fa fa-pinterest"
												aria-hidden="true"></i></a></li>
										<li><a href="#"><i class="fa fa-instagram"
												aria-hidden="true"></i></a></li>
										<li><a href="#"><i class="fa fa-facebook"
												aria-hidden="true"></i></a></li>
										<li><a href="#"><i class="fa fa-twitter"
												aria-hidden="true"></i></a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="row description_row">
						<div class="col">
							<div class="description_title_container">
								<div class="description_title">
									<a href="#">评论</a>
								</div>
							</div>
							<div class="description_text">
								<p>智能手机，是指像个人电脑一样，具有独立的操作系统，独立的运行空间，可以由用户自行安装软件、游戏、导航等第三方服务商提供的程序，并可以通过移动通讯网络来实现无线网络接入的手机类型的总称。目前智能手机的发展趋势是充分加入了人工智能、5G等多项专利技术，使智能手机成为了用途最为广泛的专利产品。</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>
		<!-- Footer -->

		<div class="footer_overlay"></div>
		<footer class="footer">
			<div class="footer_background"
				style="background-image: url(UserStyle/images/footer.jpg)"></div>
			<div class="container">
				<div class="row">
					<div class="col">
						<div
							class="footer_content d-flex flex-lg-row flex-column align-items-center justify-content-lg-start justify-content-center">
							<div class="footer_logo">
								<a href="#">zmall网上商城</a>
							</div>
							<div class="copyright ml-auto mr-auto">
								<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
								版权 &copy;
								<script>
									document.write(new Date().getFullYear());
								</script>
								由zmall网上商城开发者所有<i class="fa fa-heart-o" aria-hidden="true"></i>
								by zmall开发者 <a href="https://colorlib.com" target="_blank">官网</a>
								<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
							</div>
							<div class="footer_social ml-lg-auto">
								<ul>
									<li><a href="#"><i class="fa fa-pinterest"
											aria-hidden="true"></i></a></li>
									<li><a href="#"><i class="fa fa-instagram"
											aria-hidden="true"></i></a></li>
									<li><a href="#"><i class="fa fa-facebook"
											aria-hidden="true"></i></a></li>
									<li><a href="#"><i class="fa fa-twitter"
											aria-hidden="true"></i></a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</footer>
	</div>

	<script src="UserStyle/js/jquery-3.2.1.min.js"></script>
	<script src="UserStyle/styles/bootstrap4/popper.js"></script>
	<script src="UserStyle/styles/bootstrap4/bootstrap.min.js"></script>
	<script src="UserStyle/plugins/greensock/TweenMax.min.js"></script>
	<script src="UserStyle/plugins/greensock/TimelineMax.min.js"></script>
	<script src="UserStyle/plugins/scrollmagic/ScrollMagic.min.js"></script>
	<script src="UserStyle/plugins/greensock/animation.gsap.min.js"></script>
	<script src="UserStyle/plugins/greensock/ScrollToPlugin.min.js"></script>
	<script src="UserStyle/plugins/OwlCarousel2-2.2.1/owl.carousel.js"></script>
	<script src="UserStyle/plugins/Isotope/isotope.pkgd.min.js"></script>
	<script src="UserStyle/plugins/easing/easing.js"></script>
	<script src="UserStyle/plugins/parallax-js-master/parallax.min.js"></script>
	<script src="UserStyle/js/product.js"></script>


	<script type="text/javascript"
		src="${basepath}/back/lib/layui/layui.js" charset="utf-8"></script>

	<script type="text/javascript">
		//传递过来的goodsid的值; el表达式中的一个对象 param
		let goodsid = ${param.goodsid};
		console.log(goodsid);
		//ajax请求根据id查询goods信息
		$.ajax({
			//url type data success error
			url : '../api/front/listGoods/' + goodsid,
			type : 'get',
			success : function(res) {
				//商品图片
				$("#cover").attr("src", "../picture/" + res.cover);
				//
				$("#goodsname").html(res.goodsname);
				//goodsprice
				$("#goodsprice").html(res.goodsprice);
				//goodscount
				$("#goodscount").html(res.goodscount);
				//goodsinfo
				$("#goodsinfo").html(res.goodsinfo);
				$("#shopname").html(res.shop.shopname);
				$("#shopid").val(res.shop.shopid);
			}
		});

		//模拟登录
		$("#btnlogin").click(function() {

			$.ajax({
				//url type data success error
				url : '../api/front/login.do',
				type : 'get',
				data : {
					'username' : '大名',
					'userpwd' : '123456'
				},
				success : function(res) {
					console.log("模拟登录成功!");
					console.log('${user}');
				}
			});

		});

		layui.use('layer', function() {
			$ = layui.jquery;
			var layer = layui.layer;

			//添加到购物车
			$("#btnSubmit").click(function() {

				$.ajax({
					url : '../api/front/shopc.do',
					type : 'post',
					contentType: 'application/json',
					data : JSON.stringify({
						'goodsid' : '${param.goodsid}',
						'shopccount' : $("#quantity_input").val(),
						'goodsname': $("#goodsname").html(), 
						'total' : $("#goodsprice").html()* $("#quantity_input").val(),
						'shopid' : $("#shopid").val(),
						'userid' :'${user.userid}'
					}),
					success : function(res) {
						//console.log(res);
						//console.log(res.msg);
						layer.alert(res.msg, {
							icon : 6
						});

					}
				});
			});
		});
	</script>


</body>
</html>